<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/login.css" />
    <link rel="stylesheet" href="css/font.css">
    <title>维亚生物试剂</title>
  </head>
  <body
    class="d-flex flex-column"
    style="background-color: #ffffff; height: 100vh"
  >
    <!-- pc头部搜索，banner -->
    <header>
      <!-- 头部 -->
      <div class="pcHeader d-flex flex-column align-items-center">
        <!-- 搜索 -->
        <div
          class="headerContainer d-flex justify-content-center align-items-center"
        >
          <div
            class="searchInout d-flex justify-content-between align-items-center"
          >
            <input
              type="text"
              placeholder="请输入货号、cas号、关键词"
            />
            <img src="./image/search.png" alt="" />
          </div>
          <div
            class="inpuRight d-flex justify-content-between align-items-center"
          >
            <h4>结构搜索</h4>
            <img src="./image/zhuce.png" alt="" />
            <img src="./image/car.png" alt="" />
          </div>
        </div>
        <!-- 导航 -->
        <div class="pcNaver d-flex">
          <div class="d-flex justify-content-between">
            <a href="#!" >首页</a>
            <a href="#!" class="">体外诊断试剂</a>
            <a href="!#" class="">药研试剂</a>
            <a href="#!" class="">定制服务</a>
            <a href="#!" class="">联系我们</a>
          </div>
        </div>
      </div>
    </header>
    <!-- 中间内容 -->
    <div
      class="mainLogin"
      style="background-image: url('./image/pcbanner.png');background-size: cover;"
    >
      <div class="login_container">
        <div class="login_title">欢迎登录</div>
        <div class="d-flex flex-row login_type_container">
          <div class="login_type login_type_active" data-type="sms">短信登录</div>
          <div class="login_type" data-type="password">密码登录</div>
        </div>
        <div class="input-group mb-3 login-input">
          <div class="login-input-left">
            <span>+86</span>
          </div>
          <input
            type="text"
            class="login-input-container"
            placeholder="请输入手机号"
            aria-label="+86"
            aria-describedby="basic-addon2"
          />
        </div>
        <div class="input-group mb-3 login-input field-item field-sms">
          <div class="login-input-left">
            <i class="bi bi-shield-check"></i>
          </div>
          <input
            type="text"
            class="login-input-container"
            placeholder="请输入手机验证码" id="txt_sms"
          />
          <div class="login-input-right">
            <span style="cursor: pointer;">获取验证码</span>
          </div>
        </div>
        <div class="input-group mb-3 login-input field-item field-password" style="display:none">
          <div class="login-input-left">
            <i class="bi bi-shield-check"></i>
          </div>
          <input
            type="text"
            class="login-input-container"
            placeholder="请输入登录密码" id="txt_password"
          />
          
        </div>        
        <div class="flex flex-row form-check_container">
          <div class="form-check form-check_box">
            <input
              class="form-check-input"
              type="radio"
              name="exampleRadios"
              id="exampleRadios1"
              value="option1"
              :checked="false"
            />
            <label
              class="form-check-label login-agreement"
              for="exampleRadios1"
            >
              登录即表示同意
              <a href="https://www.vivabiotech.com.cn/privacy" target="_blank">用户协议、隐私政策</a>
            </label>
          </div>
          <a class="register" href="#">注册账号</a>
        </div>
        <button type="button" class="btn btn-lg btn-block login-btn">
          登 录
        </button>
      </div>

      <div class="register_container" style="display: none;">
        <div class="input-group mb-3 login-input">
          <div class="login-input-left">
            <span>+86</span>
          </div>
          <input
            type="text"
            class="login-input-container"
            placeholder="请输入手机号"
            aria-label="+86"
            aria-describedby="basic-addon2"
          />
        </div>
        <div class="input-group mb-3 login-input">
          <div class="login-input-left">
            <i class="bi bi-shield-check"></i>
          </div>
          <input
            type="text"
            class="login-input-container"
            placeholder="请输入手机验证码"
          />
          <div class="login-input-right">
            <span>获取验证码</span>
          </div>
        </div>
        <div class="input-group mb-3 login-input">
          <div class="login-input-left">
            <i class="bi bi-bag"></i>
          </div>
          <input
            type="text"
            class="login-input-container"
            placeholder="请输入单位名称"
          />
        </div>
        <div class="input-group mb-3 login-input">
          <div class="login-input-left">
            <i class="bi bi-envelope"></i>
          </div>
          <input
            type="text"
            class="login-input-container"
            placeholder="请输入单位邮箱"
          />
        </div>
        <div class="input-group mb-3 login-input">
          <div class="login-input-left">
            <i class="bi bi-shield-lock"></i>
          </div>
          <input
            type="password"
            class="login-input-container"
            placeholder="请输入密码"
          />
        </div>
        <div class="flex flex-row form-check_container">
          <div class="form-check form-check_box">
            <input
              class="form-check-input"
              type="radio"
              name="exampleRadios"
              id="exampleRadios1"
              value="option1"
              :checked="false"
            />
            <label
              class="form-check-label login-agreement"
              for="exampleRadios1"
            >
              注册即表示同意
              <a href="https://www.vivabiotech.com.cn/privacy" target="_blank">用户协议、隐私政策</a>
            </label>
          </div>
          <a class="loginAccount" href="#">登录账号</a>
        </div>
        <button type="button" class="btn btn-lg btn-block register-btn">
          注册账号
        </button>
      </div>


    </div>
    <script src="js/bootstrap.js"></script>
    <script src="js/index.js"></script>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
      $(".register").click(function(){
        $(".login_container").hide();
        $(".register_container").show();
      });

      $(".loginAccount").click(function(){
        $(".login_container").show();
        $(".register_container").hide();
      });

      $(".login_type").click( function(){
        $(".login_type").removeClass('login_type_active');
        $(this).addClass('login_type_active');
        var mode = $(this).data('type');
        $(".field-item").hide();
        $(".field-"+ mode).show();
      });
    </script>
  </body>
</html>
